<template>
    <div class="" v-if="state !== 'hidden'">

        <el-form ref="form" :model="form" :label-width="'write' == state ? '115px':'auto'" :class="'write' == state ? 'write-form':'read-form'"
                 :label-position="'write' == state ? 'top':'left'">
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>劳务公司信息</span>
                    <span></span>
                </div>

                <el-row :gutter="30">
                    <el-col :span="8">
                        <el-form-item label="公司名称:" prop="companyName"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入公司名称',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.companyName, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.companyName" placeholder="请输入公司名称"></el-input>
                            <span v-else>{{form.companyName|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="地址:" prop="companyAddr">
                            <el-input v-if="'write' == state" v-model="form.companyAddr" placeholder="请输入地址"></el-input>
                            <span v-else>{{form.companyAddr|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系人:" prop="contact"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入联系人',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.contact, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.contact" placeholder="请输入联系人"></el-input>
                            <span v-else>{{form.contact|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话:" prop="contactPhone"
                                      :rules="'write' == state ? [{
                                         required: true,
                                         message: '请输入联系电话',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.contactPhone, callback)
                                       },{ pattern: /^(1[3456789]\d{9}|[0-9]{5,12})$/, message: '手机号码格式不正确', trigger: 'blur' }]:{}">
                            <el-input maxlength="12" @input="value=>form.contactPhone=value.replace(/[^\d]/g,'')" v-if="'write' == state" v-model="form.contactPhone" placeholder="请输入联系电话"></el-input>
                            <span v-else>{{form.contactPhone|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="税号:" prop="taxpayerIdentityNumber"
                                      :rules="'write' == state ? [{
                                         required: true,
                                         message: '请输入税号',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.taxpayerIdentityNumber, callback)
                                       }, { pattern: /^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/, message: '税号格式不正确', trigger: 'blur' }
                                       ]:{}">
                            <el-input maxlength="20" v-if="'write' == state"
                                      @input="value=>form.taxpayerIdentityNumber=value.replace(/[^\w_]/g, '')"
                                      v-model="form.taxpayerIdentityNumber" placeholder="请输入税号"></el-input>
                            <span v-else>{{form.taxpayerIdentityNumber|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="开户名称:" prop="bankAccountName"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入开户名称',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.bankAccountName, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.bankAccountName" placeholder="请输入开户名称"></el-input>
                            <span v-else>{{form.bankAccountName|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="开户银行:" prop="bankName"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请输入开户银行',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.bankName, callback)
                                       }:{}">
                            <el-input maxlength="50" v-if="'write' == state" v-model="form.bankName" placeholder="请输入开户银行"></el-input>
                            <span v-else>{{form.bankName|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行账号:" prop="bankAccountNumber"
                                      :rules="'write' == state ? [{
                                         required: true,
                                         message: '请输入银行账号',
                                         trigger: 'blur',
                                         validator: (rule, value, callback) => validData(rule, form.bankAccountNumber, callback)
                                       },{ pattern: /^[1-9]\d{11,19}$/, message: '请输入正确的银行账户', trigger: 'blur' }]:{}">
                            <el-input maxlength="20" @input="value=>form.bankAccountNumber=value.replace(/[^\d]/g,'')" v-if="'write' == state" v-model="form.bankAccountNumber" placeholder="请输入银行账号"></el-input>
                            <span v-else>{{form.bankAccountNumber|filterNull}}</span>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="上传营业执照:" prop="businessLicenseFrontImg"
                                      :rules="'write' == state ? {
                                         required: true,
                                         message: '请上传营业执照',
                                         trigger: 'change',
                                         type:'number',
                                         validator: (rule, value, callback) => validData(rule, form.businessLicenseFrontImg, callback)
                                       }:null">
                            <div class="flex">
                                <ImageCommon :disabled="'write' != state" info="营业执照正面" :limit="1" v-model="form.businessLicenseFrontImg"></ImageCommon>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="附件上传:" prop="annex">
                            <ImageCommon :disabled="'write' != state" :up-type="2" info="选择附件" :limit="9" v-model="form.annex"></ImageCommon>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注:" prop="memo">
                            <el-input maxlength="500" type="textarea" v-if="'write' == state" v-model="form.memo" placeholder="请输入备注"></el-input>
                            <span v-else>{{form.memo|filterNull}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="1==form.delStatus">
                        <el-form-item label="删除备注:" prop="delRemark">
                            <el-input type="textarea" v-if="'write' == state" v-model="form.delRemark" maxlength="500"
                                      placeholder="请填写删除备注"></el-input>
                            <span v-else>{{ form.delRemark|filterNull }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>

        </el-form>

    </div>
</template>

<script>


export default {
    dicts: [],
    props:{
        value: {
            default: {},
        },
        state: {
            default: "write",
        },
    },
    computed:{
        form:{
            get() {
                return this.value;
            },
            set(value) {
                this.$emit("input", value);
            },
        },

    },
    data() {
        return {
        };
    },
    methods: {
        validData(rule, value, callback) {
            // console.log('aaa', rule, value, callback)
            if (rule.required && !value) {
                // this.$modal.msgError(`未填写${value}`);
                callback(new Error(rule.message));
            } else {
                callback();
            }
        },


        async valid() {
            // this.form.workId = this.form.id
            return new Promise((resolve)=>{
                if('write'==this.state){
                    this.$refs["form"].validate(valid => {
                        resolve(valid);
                    });
                }else {
                    resolve(true)
                }
            })
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

::v-deep .read-form .el-form-item__label-wrap,
::v-deep .read-form .el-form-item__content {
    margin-left: 0 !important;
}
.el-descriptions{
    margin: 0 -15px;
}
</style>
